{% extends 'index.html' %}
{% block custome_css %}
    <link href="/static/plugin/prettify/desert.css" rel="stylesheet">
    <style>
        pre.prettyprint ol.linenums li {list-style-type: decimal;}
    </style>
{% endblock %}

{% block sidebar %}
    {% include 'include/backend/project/submodul/sidebar.html' %}
{% endblock %}

{% block content %}
    <h3 class="page-header">
        {{ submodul.name }}
        <a href="{% url 'configration_add' project.id submodul.id %}" class="pull-right" >Add</a>
    </h3>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>配置文件</th>
                    <th>描述</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            {% for row in query_set %}
                <tr nid="{{ row.id }}">
                    <td>{{ row.file_path }}</td>
                    <td>{{ row.description }}</td>
                    <td><button nid="{{ row.id }}" role="displayConf" class="btn btn-info" style="padding: 5px 10px; font-size:10px">展示</button></td>
                    <td><a class="btn btn-info" style="padding: 5px 10px; font-size:10px" href="{% url 'configration_change' project.id submodul.id row.id %}">修改</a></td>
                    <td><button class="btn btn-danger" role="delete" nid="{{ row.id }}" style="padding: 5px 10px; font-size:10px">删除</button></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="modal fade" id="DisplayConf" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false">
        <div class="modal-dialog" style="width:80%;" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body"><pre class="prettyprint linenums"><code></code></pre></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    {% include 'include/common/delete_confirm_modal.html' %}
    {% include 'include/common/built_in_error_msg_modal.html' %}
{% endblock %}

{% block custome_js %}
    <script src="/static/plugin/prettify/prettify.js"></script>
    <script src="/static/plugin/prettify/lang-yml.js"></script>
    <script>
        $(function () {
            $('[role="delete"]').click(function () {
                 $('#delete_confirm_btn').attr('nid',$(this).attr('nid'));
                 $('#delete_confirm_modal').modal();
            });
            $('#delete_confirm_btn').click(function () {
                var nid = $(this).attr('nid');
                $.ajax({
                    url : "{% url 'obj_delete' 'Configuration' %}",
                    type: 'POST',
                    data: {'nid':nid},
                    dataType: 'JSON',
                    success: function (res) {
                        if(res.status){
                            $('tr[nid="'+nid+'"]').remove();
                        }else{
                            $('#built_in_error_msg_modal').modal();
                        }
                    },
                    error: function (res) {
                        $('#built_in_error_msg_modal').modal();
                    }
                });
            });
            $('[role="displayConf"]').click(function () {
                displayConf($(this).attr('nid'));
            });
        });
        function displayConf(nid) {
            // 展示配置文件内容
            $.ajax({
                    url : "{% url 'display_conf' %}",
                    type: 'GET',
                    data: {'nid':nid},
                    dataType: 'JSON',
                    success: function (res) {
                        if(res.status){
                            file_type = 'lang-' + res.data.file_type;
                            $('#myModalLabel').text(res.data.file_path);
                            $('code').text(res.data.config);
                            $('pre').addClass(file_type);
                            prettyPrint();

                            $('#DisplayConf').modal();
                            $('#DisplayConf').on('hidden.bs.modal',function () {
                                $('pre').removeClass(file_type);
                                $('pre').removeClass('prettyprinted');
                                $('pre').empty();
                                code_ele = document.createElement('code');
                                $('pre').append(code_ele);
                                return true;
                            });
                        }else{
                            $('#built_in_error_msg_modal').modal();
                        }
                    },
                    error: function (res) {
                        $('#built_in_error_msg_modal').modal();
                    }
                });

        }
    </script>
{% endblock %}